<!--  -->
<template>
  <div class="wrap" :loading="loading">
    <!-- <div class="lg-title">
      <span>工业监测审计系统</span>
    </div> -->
    <div class="leftbg" id="elecData_father" :style="{ background: `url(${loginBackground}) #ffffff no-repeat` }">
      <div class="xDeepseek">
        <img src="../../assets/logo2@2x.png" alt="">
      </div>
      <div class="introductionText">
        <span style="font-size: 27px;color:#fff;font-weight:600;">企智库人工智能数据分析管理系统</span>
        <span style="font-size: 16px;color:#fff;">集网络加速、安全防护与智能服务于一体，</span>
        <span style="font-size: 16px;color:#fff;">内置高性能网络加速防火墙，保障数据传输安全与流畅；</span>
        <span style="font-size: 16px;color:#fff;">搭载人工智能助手，提供智能运维与实时决策支持；</span>
        <span style="font-size: 16px;color:#fff;">支持Deepseek本地化部署及企业智库构建，满足企业定制化需求，助力高效管理与业务创新。</span>
        <span style="font-size: 16px;color:#fff;">专为企业打造，安全、智能、高效！</span>
      </div>
      <vue-canvas-nest :config="config" :el="'#elecData_father'"></vue-canvas-nest>
    </div>
    <div class="main">

      <div class="login">
        <div class="login-method">
          <!-- <div>
            <img src="../../assets/logo@2x.png" alt="" style="width:100px;">
          </div> -->
          <div>
            <!-- <el-select v-model="lang" size="small" style="width:100px;">
              <el-option label="中文" value="zh"></el-option>
              <el-option label="English" value="en"></el-option>
            </el-select> -->
            <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
              <div style="text-align:center;">
                <span><svg-icon icon-class="international" style="margin-right:10px;" />{{ getLangName(lang) }}<i
                    class="el-icon-arrow-down el-icon--right"></i></span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="changeLang('zh')">简体中文</el-dropdown-item>
                <el-dropdown-item @click.native="changeLang('en')">English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
        <div class="login-name">
          <div>
            <img src="../../assets/logo@2x.svg" alt="" style="width:80px;margin-bottom:30px;">
            <p style="font-size:24px;color:#333333;font-weight: 700;margin:0;white-space: nowrap;">{{ companyName }}</p>
            <!-- <p style="font-size:12px;color:#a29ca2;margin:8px;">软件版本-v3.0.22</p> -->
          </div>
        </div>
        <div class="login-form">
          <el-form :model="loginForm" :rules="rules" ref="loginForm" :show-message=false>
            <el-form-item prop="username">
              <span style="font-size:14px;color:#666666;">用户名</span>
              <el-input v-model="loginForm.username" placeholder="请输入用户名" @keyup.enter.native="loginEnterFun"
                oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="10">
                <i style="cursor: pointer" slot="suffix" @click="loginForm.username = ''" class="el-icon-circle-close" />
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <span style="font-size:14px;color:#666666;">密码</span>
              <el-input v-model="loginForm.password" :type="type === true ? 'text' : 'password'" placeholder="请输入密码"
                @keyup.enter.native="loginEnterFun" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="32">
                <svg-icon style="cursor: pointer" slot="suffix" @click="type = !type"
                  :icon-class="type ? 'eye-open' : 'eye'" />
              </el-input>
            </el-form-item>
            <el-checkbox v-model="checked"><span style="color: #B3B3B3;">我已阅读同意</span> <span
                @click.prevent="showAgreement">用户使用协议 </span>
              <span @click.prevent="showDataAgreement"> 用户数据处理协议</span></el-checkbox>

            <user-agreement ref="agreement" @agree="handleAgree" @disagree="handleDisagree" />
            <data-agreement ref="DataAgreement" @agree="handleAgree" @disagree="handleDisagree" />
            <el-form-item class="form-submit">
              <el-button type="primary" class="submit" @click="login('loginForm')" :disabled="!checked">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="download">
        <el-link type="primary" :underline="false" @click="DownloadFile('企智库助手.rar')"
          style="margin-right:10px;">下载企智库客户端</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { connrequest, downloadfile, getLanguage } from '@/api/firstPage'
import vueCanvasNest from 'vue-canvas-nest'
import UserAgreement from './components/UserAgreement.vue'
import DataAgreement from './components/DataAgreement.vue'
export default {
  components: {
    vueCanvasNest,
    UserAgreement,
    DataAgreement
  },
  data() {
    return {
      loading: false,
      type: false,
      checked: true,
      loginForm: {
        username: '',
        password: ''
      },
      //配置属性
      config: {
        color: "255, 255, 255",
        pointColor: "255, 255, 255",
        pointR: 2,
        opacity: 1,
        zIndex: 5,
        count: 50
      },//配置炫酷效果
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      companyName: '',
      // loginLogoIcon: '',
      loginBackground: ''
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.fetchLanguage()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // this.companyName = process.env.NODE_ENV === 'development' ? '熊猫出海AI大使管理系统' : Glod.companyName
    this.companyName = '企智库人工智能数据分析管理系统'
    this.loginBackground = process.env.NODE_ENV === 'development' ? require('../../assets/bg@2x.png') : Glod.loginBackground
  },
  computed: {
    lang: {
      get() {
        return this.$store.state.app.language
      },
      set(lang) {
        this.$i18n.locale = lang
        this.$store.dispatch('app/setLanguage', lang)
      }
    }
  },
  watch: {
    lang() {
      this.setOptions()
    }
  },
  methods: {
    async changeLang(val) {
      this.lang = val
      const data = {
        Data: {
          Language: val
        }
      }
      await connrequest('SetLanguage', data)
    },
    showAgreement() {
      this.$refs.agreement.openDialog()
    },
    showDataAgreement() {
      this.$refs.DataAgreement.openDialog()
    },
    handleAgree() {
      // 用户同意协议后的逻辑
      this.checked = true
      this.$message.success('已同意用户使用协议')
    },
    handleDisagree() {
      // 用户不同意的处理
      this.checked = false
      this.$message.warning('需同意协议方可继续使用')
    },
    getLangName(val) {
      let langName = ''
      switch (val) {
        case 'zh':
          langName = '简体中文'
          break;
        default:
          langName = 'English'
          break;
      }
      return langName
    },
    // 获取语言
    async fetchLanguage() {
      const res = await connrequest('GetLanguage');
      this.lang = res.Data?.Language || 'en'
    },
    setOptions() {
      if (this.isSettingOptions) return;
      this.isSettingOptions = true;
      this.companyName = '企智库人工智能数据分析管理系统'
      // 标志重置，可以根据需要选择更合适的时机来重置
      this.$nextTick(() => {
        this.isSettingOptions = false;
      });
    },
    loginEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      var val = e.target.value;
      if (keyCode == 13 && val) {
        this.login('loginForm')
      }
    },
    login(loginForm) {
      this.loading = true
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          if (this.loginForm.username.length > 32) {
            this.$message.error(this.$t('login.nameTooLong'))
            return false
          }
          if (this.loginForm.password.length > 32) {
            this.$message.error(this.$t('login.pwdTooLong'))
            return false
          }
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$store.dispatch('user/getCurrentTheme')
              this.$router.push({ path: '/' })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        }
        else {
          this.loading = false
          this.$message.error(this.$t('login.noNameAndPwd'))
          return false
        }
      })
    },
    async DownloadFile(fileName) {
      let protocol = window.location.protocol
      let hostname = window.location.hostname;
      let port = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
      let softwareName = `${protocol}//${hostname}:${port}/${fileName}`
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = softwareName;
      a.click();
      a.remove();
    }
  }
};
</script>
<style scoped lang='scss'>
.theme {
  margin: 20px;
  display: flex;
  flex-direction: column;

  a {
    cursor: pointer;
    padding-bottom: 10px;

    &:hover {
      color: #06b4fd;
    }
  }
}

.wrap {
  // position: relative;
  display: flex;
  align-items: center;
  height: 100vh;

  .leftbg {
    position: relative;
    background-size: cover !important;
    width: 60vw;
    height: 100vh;

    .xDeepseek {
      width: 235px;
      position: absolute;
      left: 45px;
      top: 40px;

      img {
        width: 100%;
      }
    }

    .introductionText {
      position: absolute;
      top: 35vh;
      left: 138px;
      display: flex;
      flex-direction: column;

      span {
        padding-bottom: 10px;
      }
    }
  }

  .lg-title {
    font-size: 45px;
    text-align: left;
    letter-spacing: 11px;
    font-weight: bold;
    color: #b4946e;
    padding: 30px 120px;
    // background: linear-gradient(to right, #1743ff, #00b3ff);
    // background-clip: text;
    // color: transparent;
  }

  .main {
    background: #fff;
    position: relative;
    width: 40vw;
    height: 100vh;
    background-size: auto 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-method {
      position: absolute !important;
      top: 85px;
      width: 480px;
      padding: 0px 10px;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .download {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #d6b086 !important;
    }

    .login {
      color: #d6b086;
      width: 480px;
      background: rgba(255, 255, 255, .9);
      border-radius: 10px;

      &-name {
        font-size: 20px;
        text-align: center;
        padding: 5px 25px;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon-anquandunpai {
          font-size: 24px;
          padding-right: 10px;
          color: #957d61;
        }

        span {
          line-height: 40px;
          // font-weight: bold;
        }
      }

      &-form {
        padding: 30px 25px;

        ::v-deep .el-input {
          height: 45px;
          line-height: 45px;
          background: #fff;
          border: 1px solid #eee;
          border-radius: 5px;

          .el-input__inner {
            font-size: 16px;
            text-indent: 6px;
            color: #000;
            background: none;
            border: none;
          }

          .el-input__inner::placeholder {
            color: #B3B3B3;
          }

          .el-input__icon {
            font-size: 25px;
            color: #967d60;
          }
        }

        .form-submit {
          margin: 0 auto;
        }

        .submit {
          width: 100%;
          height: 45px;
          font-size: 18px;
          letter-spacing: 3px;
          text-indent: 10px;
          text-align: center;
          background: #3a5ba6;
          border: none;
          margin: 25px auto 0px;
          border-radius: 5px;

          &:hover {
            background: #4a73d1;
          }

          &.is-disabled {
            background: #8cc8ff;
          }
        }
      }

      &-method {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 55px;
        font-size: 20px;
        text-align: center;
        background: rgba(255, 255, 255, .8);
        border-radius: 10px;

        img {
          width: 30px;
          margin-right: 10px;
          // border-radius: 30px;
          // background: rgba(255, 255, 255, .8)
        }

        div {
          cursor: pointer;

          .iconfont {
            position: relative;
            font-size: 20px;
            padding-right: 10px;
            z-index: 2;
          }

          .icon-zhifubao {
            color: #06b4fd;
          }

          .icon-weixin {
            margin-left: 30px;
            color: #28c445;
          }
        }

        .yuan {
          position: absolute;
          width: 19px;
          height: 19px;
          background: #fff;
          border-radius: 50%;
        }

        .yuan1 {
          left: 218px;
        }

        .yuan2 {
          left: 338px;
        }
      }
    }
  }
}
</style>

<style>
/* 去掉记住密码填充样式 */
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000;
}
</style>